<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function timer(t) {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve('data-' + t)
                }, t);
            })
        }

        // 试想一个需求，现在我有一个任务列表，我要求你必须等第一个任务执行完在执行第二个，可以用async 和await，但是在顺序逻辑部分必须用for循环。
        async function test(){
            let arr = [timer(1000),timer(1000),timer(1000)];

            for(let item of arr){
                /*
                    你是不是以为这么写就可以了？
                    其实并没有，for循环本身是同步任务，你调用这个test函数，这个for循环其实一下就执行完了
                    只是留下await后面的微任务后面再处理罢了，所以你会发现三个任务在窗口的打印基本是一起出现的，这显然没有做到后面的任务等前面的任务执行完了再执行.
                    所以想要实现这个功能，必须有个办法能把for循环也给卡住，让他别一直执行
                */ 
                let res = await item;
                console.log(res);
            }
        }
        test();
    </script>
</body>

</html>